<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/ui/base/chart_base_2d_brushable_x.html">
<link rel="import" href="/tracing/ui/base/column_chart.html">

<script>
'use strict';

tr.exportTo('tr.ui.b', function() {
  const LineChart = tr.ui.b.define('line-chart', tr.ui.b.ChartBase2DBrushX);

  LineChart.prototype = {
    __proto__: tr.ui.b.ChartBase2DBrushX.prototype,

    decorate() {
      super.decorate();
      this.enableHoverBox = true;
      this.displayXInHover = false;
    },

    get defaultGraphWidth() {
      return 20 * this.data_.length;
    },

    get defaultGraphHeight() {
      return 100;
    },

    drawHoverValueBox_(circle) {
      tr.ui.b.ColumnChart.prototype.drawHoverValueBox_.call(this, circle);
    },

    clearHoverValueBox_(circle) {
      tr.ui.b.ColumnChart.prototype.clearHoverValueBox_.call(this, circle);
    },

    updateDataContents_(dataSel) {
      dataSel.selectAll('*').remove();
      const dataBySeriesKey = this.getDataBySeriesKey_();
      const seriesKeys = [...this.seriesByKey_.keys()];
      const pathsSel = dataSel.selectAll('path').data(seriesKeys);
      pathsSel.enter()
          .append('path')
          .style('fill', 'none')
          .style('stroke-width', '1.5px')
          .style('stroke', key => this.getDataSeries(key).color)
          .attr('d', key => {
            const line = d3.svg.line()
                .x(d => this.xScale_(d.x))
                .y(d => this.yScale_(this.dataRange.clamp(d[key])));
            return line(dataBySeriesKey[key]);
          });
      pathsSel.exit().remove();

      if (this.enableHoverBox) {
        for (let index = 0; index < this.data_.length; ++index) {
          const datum = this.data_[index];
          const x = this.getXForDatum_(datum, index);
          for (const [key, value] of Object.entries(datum)) {
            if (key === 'x') continue;
            if (value === undefined) continue;
            const color = this.getDataSeries(key).color;
            const circle = document.createElementNS(
                'http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', this.xScale_(x));
            circle.setAttribute('cy',
                this.yScale_(this.dataRange.clamp(value)));
            circle.setAttribute('r', 5);
            circle.style.fill = color;
            circle.datum = datum;
            circle.key = key;
            circle.value = datum[key];
            circle.leftPx = this.xScale_(x);
            circle.widthPx = 0;
            circle.color = color;
            circle.topPx = this.yScale_(this.dataRange.clamp(value));
            circle.heightPx = 0;
            circle.addEventListener(
                'mouseenter', () => this.drawHoverValueBox_(circle));
            circle.addEventListener(
                'mouseleave', () => this.clearHoverValueBox_(circle));
            dataSel[0][0].appendChild(circle);
          }
        }
      }
    }
  };

  return {
    LineChart,
  };
});
</script>
